<template>
	<view class="l-bks-list">
		<view style="height: 140rpx;"></view>
		<view class="bks-content-box u-flex u-col-top" v-if="list.length > 0">
			<view class="left" :class="shade" style="z-index: 98;">
				<view @tap="toItemBk(v.bk_code)" v-for="(v, k) in list" :key="k" class="name u-flex-col u-row-center" :class="k%2 ? 'bg-gray':''">
					<view>{{v.bk_name}}</view>
					<view class="u-font-20 u-type-info-dark">BK{{$u.func.bkCode(v.bk_code)}}</view>
				</view>
			</view>
			<view class="right u-m-b-20" @touchstart="touchstart" @touchend="touchend">
				<scroll-view id="content_scroll" scroll-y="true" scroll-x="false" @scroll="scrollTo" :scroll-left="scroll_left">
					<view v-for="(v, k) in list" :key="k" @tap="toItemBk(v.bk_code)">
						<view class="zf item" :class="[(k%2 ? 'bg-gray':''),$u.func.redOrGreen(v.bk_ds3)]">{{v.bk_ds3/100}}%</view>
						<view class="zd item" :class="k%2 ? 'bg-gray':''">
							<text class="red">{{v.bond_up}}</text> / <text :class="v.bond_down ? 'green':''">{{v.bond_down ? v.bond_down:'0'}}</text>
						</view>
						<view class="lz item" :class="k%2 ? 'bg-gray':''">{{v.bond_name}}</view>
						<view class="zf item" :class="[(k%2 ? 'bg-gray':''), $u.func.redOrGreen(v.bk_ds3)]">{{v.bk_ds/100}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="status == 'loding'" class="u-flex u-row-center u-m-30">
			<u-loading mode="circle" color="#2979FF"></u-loading> 
			<text class="u-p-l-10 u-type-info-dark">数据加载中···</text>
		</view>
		<view v-else-if="status =='nodata'" class="u-flex u-row-center u-m-30">
			<u-empty text="数据为空"></u-empty>
		</view>
		<view v-else-if="status =='lastdata'" class="u-flex u-row-center u-m-30">
			<u-loadmore status="nomore" />
		</view>
		<view v-else-if="status =='abnormal'" class="u-flex u-row-center u-m-30">
			<u-empty text="网络异常" mode="wifi"></u-empty>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			status:{
				type:String,
				default:'loding'
			},
			order:{
				type:String,
				default:'desc'
			},
			orderField:{
				type:Number,
				default:0
			},
			list:{
				type:Array,
				default: ()=> {
					return [];
				  }
			}
		},
		data(){
			return {
				// scroll_left:0,
				shade:'',
				// loding:true,
				// list:[],
				// status:'loding',
				
				last_page:0,
				n_order:'desc',
				n_order_f:0,
				n_type:0,
				scroll_left:0
			}
		},
		watch:{
			order(o){
				console.log('order:', o, this.type, this.n_type)
				// this.$u.api.bksList({"type":this.type, "order":o, "order_f":this.n_order_f}).then(data=>{
				// 	this.list = data.data;
				// 	console.log(data);
				// });
			}
		},
		mounted(){
			
			// this.$u.api.bksList({type:this.type, order:this.order, order_f:this.orderField}).then(data=>{
			// 	this.list = data.data;
			// });
			console.log(this.status)
			// setTimeout(()=>{
			// 	this.loding = true;
			// },2000)
			
		},
		methods:{
			scrollTo(e){
				// this.scroll_left = e.detail.scrollLeft;
				this.$emit('scrollToLeft', e.detail.scrollLeft)
			},
			touchstart(e){
				// console.log('touchstart:',e)
				this.shade = 'shade';
			},
			touchend(e){
				this.shade = '';
				// console.log('end',e)
			},
			orderClick(type, field, order){
				console.log('orderclick')
				this.n_order = order;
				this.n_order_f = field;
				this.n_type = type;
				// this.$u.api.bksList({"type":type, "order":order, "order_f":field}).then(data=>{
				// 	this.list =data.data
				// 	console.log(data);
				// });
			},
			toItemBk(bk_code){
				this.$u.route('/pages/bks/item',{"code":bk_code});
			}
		}
	}
</script>

<style scoped>
	.bks-content-box .left.shade{
		box-shadow:0 0 10px 3px #ccc;
	}
	.bks-content-box{
		background-color: #ffffff;
		/* padding-top: 140rpx; */
	}
	.bks-content-box .left{
		width: 30%;
	}
	.bks-content-box .left .name{
		padding: 0 20rpx;
		height: 90rpx;
		/* line-height: 80rpx; */
	}
	
	.bks-content-box .right{
		width: 70%;
		white-space: nowrap;
	}

	.bks-content-box .right .item{
		display: inline-block;
	}
	
	.zf,.zd,.lz{
		width: 160rpx;
		padding: 0 10rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.bg-gray{
		background-color: #f5f5f5;
	}
</style>
